<template>
  <div class="lyrics" @click="$emit('showMe', '105vw')">
    <div class="title">{{ listenSong?.name }}</div>
    <div class="lyrics-all" :style="`top:${offsetHeight || 0}`" ref="alllyric">
      <div
        class="lyrics-item"
        :class="active == lyricItem.text ? 'active' : ''"
        v-for="(lyricItem, index) in lyric"
        :key="lyricItem.time + index"
      >
        {{ lyricItem.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LyricsComponent",
  props: {
    listenSong: {
      type: Object,
      default: () => ({}),
    },
    currentTime: {
      type: Number,
      default: 0,
    },
    lyric: {
      type: Array,
      default: () => [],
    },
    isStop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: " 作词 : Ice Paper",
      offsetHeight: 0.25,
      index:-1,
      top:0
    };
  },
  watch: {
    currentTime(val) {
      if (!this.lyric || this.isStop) return;
      let index = 0;
      this.lyric.reduce((pre, item, i) => {
        if (val >= item.time) {
          pre = (pre * 100 + 0.35 * 100) / 100;
          index = i;
        }
        return pre;
      }, 0);
      for (let i = 0; i < this.$refs.alllyric.children.length; i++) {
        this.$refs.alllyric.children[i].classList.remove("active");
      }
      this.$refs.alllyric.children[index].classList.add("active");
      if(index==this.index)return;
      this.index=index;
      this.top = -this.$refs.alllyric.children[index].offsetTop;
      if(this.top>-200)return;
      this.offsetHeight = -this.$refs.alllyric.children[index].offsetTop+200+"px";
      console.log(this.offsetHeight);
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #ff3a3a !important;
  border-bottom-color: #ff3a3a !important;
}
.lyrics {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  font-size: 0.14rem;
  text-align: center;
  box-sizing: border-box;
  border: 0.1rem solid transparent;
  overflow: hidden;
  color: #333;
  .title {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 0.25rem;
    font-weight: bold;
    font-size: 0.16rem;
    line-height: 0.25rem;
    background-color: #fff;
  }
  .lyrics-all {
    position: absolute;
    width: 100%;
    height: calc(100vh - 0.25rem);
    left: 0;
    top: 0.25rem;
    background-color: #fff;
    transition: 0.3s;
  }
}
</style>